<script setup>
import { ref, watch,defineEmits,defineProps } from 'vue';
import axios from 'axios'; // 确保你已正确配置 axios
import { ElMessage } from 'element-plus';

const props = defineProps({
  dialogVisible: Boolean,  // 是否可见
  studentId: Number   // 书籍的 id
});
function deleteStudent() {
  // 调用后端的删除接口，将学生 ID 发送到 RabbitMQ
  axios.get(`/student/delete/${props.studentId}`)
      .then(resp => {
        ElMessage.success("删除请求已发送成功！");
        handlerClose(); // 关闭对话框
      })
      .catch(error => {
        console.error("删除失败", error);
        ElMessage.error("删除请求发送失败！");
      });
}

const dialogVisibleInner = ref(false);  // 内部是否可见的属性
const student = ref({}); //
watch(() => props.dialogVisible, (newVal) => {
  console.log("newVal",newVal)
  if (newVal) {
    findById();
  }
});
const emit = defineEmits(['close']);
function handlerClose() {
  dialogVisibleInner.value = false;
  // 告诉父组件，当前子组件关闭了
  emit('close', false);
}
function findById() {
  axios.get(`/student/findById/${props.studentId}`)
      .then(resp => {
        console.log("resp",resp)
        student.value = resp.data; // 查询到的数据
        dialogVisibleInner.value = true; // 查询出来后，显示对话框
  });
}
</script>

<template>
  <el-dialog v-model="dialogVisibleInner" title="学生详情" @close="handlerClose">
    <div class="dialog-content">
      <div class="book-image">
        <img :src="$urlImage + student.img" alt="学生详情">
      </div>
      <div class="book-info">
        <h2 class="title">{{ student.sname }}</h2>
        <p class="publisher">年龄：{{ student.sage }}</p>
        <p class="price">分数：{{ student.score }}</p>
        <el-divider></el-divider>
        <p class="intro">{{ student.info }}</p>
        <div class="button-group">
          <el-button type="primary" size="medium" @click="deleteStudent" icon="el-icon-circle-close">
            删除
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>


<style scoped>
.dialog-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.book-image {
  width: 30%;
  text-align: center;
}

.book-image img {
  max-width: 100%;
  height: auto;
}

.book-info {
  width: 68%;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 6px;
}

.author {
  font-size: 18px;
  margin: 0 0 4px;
}

.publisher,
.price {
  font-size: 16px;
  margin: 0 0 2px;
}

.intro {
  font-size: 14px;
  margin: 0 0 10px;
}

.button-group {
  display: flex;
  justify-content: flex-end;
}
</style>